 /*
 * @description: 客服管理
 * @Author: along
 * @Date: 2020-09-25
 * @Last Modified by: along
 * @Last Modified time: 2020-09-25
 */
<template>
    <div class="container customManagement">
        <!-- title -->
        <div class="wrap-title">
            客服列表
            <el-popover
                placement="right"
                width="320"
                trigger="hover"
                content="客服分为掌大客服和商家客服（商家后台创建的客服和掌大招聘的校园兼职客服）。总后台需要配置校园兼职客服的工作排期和掌大自己客服的工作排期以及资料设置"
                popper-class="reception-poper"
            >
                <p slot="reference">
                    <i class="iconfont el-icon-hand-bangzhu"/>
                </p>
            </el-popover>
        </div>

        <!-- tab -->
        <el-tabs v-model="formData.TYPE">
            <el-tab-pane
                label="掌大客服"
                name="1"
            />
            <el-tab-pane
                label="学生客服"
                name="2"
            />
        </el-tabs>

        <!-- custom list -->
        <custom-zd v-if="formData.TYPE == '1'"/>
        <custom-student v-if="formData.TYPE == '2'" />
    </div>
</template>

<script>
import customZd from '@/components/custom/custom-zd.vue';
import customStudent from '@/components/custom/custom-student.vue';

const LIST = {
    TYPE: '1'
};

export default {
    components: {
        customZd,
        customStudent
    },
    data () {
        return {
            formData: {
                ...LIST
            },
            authResult: {}
        };
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 页面数据初始化
         */
        init () {
            this.authResult = this.$route.meta.authResult;
            this.formData.TYPE = this.$route.query.TYPE ? this.$route.query.TYPE : '1';
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    background-color: #fff;
    padding: 32px 32px 5px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 12px;
    .wrap-title {
        color: #333333;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        cursor: pointer;
        margin-bottom: 20px;
        .el-icon-hand-bangzhu {
            font-size: 15px;
            color: #666666;
            margin-left: 8px;
        }
    }
    .cursor-font {
        color: #20A0FF;
        cursor: pointer;
    }
}
</style>

<style lang="less">
.customManagement {
    .el-tabs__nav {
        .el-tabs__item {
            color: #999999;
        }
        .is-active {
            font-weight: 500;
            color: #20A0FF;
        }
    }
    .el-tabs__nav-wrap::after {
        background-color: #EBEEF5;
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .table-button .el-button {
        padding: 4px 0;
        margin-left: 0;
    }
}
.reception-poper {
    color: #666666;
    line-height: 20px;
    font-size: 13px;
    padding: 16px;
}
</style>